<script setup>
import {onLoad} from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue';
import { isOverTwoHours, showFailToast, showToast } from '../../utils';
import { delayTask, getTaskDetail } from '../../apis/task';


  const taskDetail = ref({})
  const req = ref({})
  const delayTime = ref('不可超过2个小时')
  const delayReason = ref('')
  //是否超过两小时
  const isOver = ref(true)

  const onSubmit = () => {
    req.value.delayTime = taskDetail.value.planDepartureTime.split(' ')[0] + ' ' +
                            delayTime.value
    req.value.delayReason = delayReason.value
    console.log('延迟提货请求体：',req.value);

    if(isOver.value){
      return showFailToast("时间相差两小时")
    }

    delayTask(req.value,res => {
      console.log('延迟提货响应:',res);
      if(res.code === 200){
        showToast('延迟提货成功')
        uni.navigateBack()
      }else{
        showFailToast('延迟提货失败，' + res.msg)
      }
    })
  }

  onLoad(query => {
    console.log(query);
    if(!query.id){
      showFailToast('id参数为空')
      return uni.navigateBack()
    }
    req.value.id = query.id
  })

  const timeChange = (val) => {
    delayTime.value = val.detail.value
    let oldTime = taskDetail.value.planDepartureTime.split(' ')[1].slice(0,5)
    isOver.value = !isOverTwoHours(oldTime,delayTime.value)
    if(isOver.value){
      showFailToast('时间超过两小时')
    }
  }

  onMounted(() => {
    getTaskDetail(req.value.id,res => {
        console.log('getTaskDetail',res);
        if(res.code === 200){
          taskDetail.value = res.data
        }else{
          showFailToast('获取任务详细失败，' + res.msg)
        }
    })
  })

</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :rightText="taskDetail.planDepartureTime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker class="time-picker" mode="time" @change="timeChange">
            <text>{{delayTime}}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              v-model="delayReason"
              class="textarea"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text class="words-count">0/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button class="button" @click="onSubmit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
